<template>
	<view class="user clearfix  hv100 ">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">提现</block>
		</cu-custom>
		<view class="flex flex-direction bg-white px15 mt5">
			<view class="py10">提现金额</view>
			<view class="flex align-center justify-between py15">
				<view class="flex align-center">
					<text class="f26">￥</text>
					<input v-model="money" class="ml10" type="number" :placeholder="'本次最多可转出'+balance+'元'" />
				</view>
				<view @click="money=balance">全部</view>
			</view>
			<view class="payline"></view>
			<view class="flex align-center justify-between py15">
				<text>手续费</text>
				<text class="text-red">{{shouxu}}%</text>
			</view>
		</view>
		<view class="flex flex-direction bg-white px15 mt10">
			<view class="py10">选择提现方式</view>
			<view class="payline"></view>
			<view class="mt15 flex align-center" @click="radio=1">
				<image src="/static/wallet/choice.png" class="block20" v-if="radio==1" mode=""></image>
				<image src="/static/wallet/nochoice.png" class="block20" v-else mode=""></image>
				<image src="/static/wallet/zfb.png" class="block25 ml15" mode=""></image>
				<text class="ml10">支付宝</text>
			</view>
			<view class="mt15  flex align-center" @click="radio=2">
				<image src="/static/wallet/choice.png" class="block20" v-if="radio==2" mode=""></image>
				<image src="/static/wallet/nochoice.png" class="block20" v-else mode=""></image>
				<image src="/static/wallet/wx.png" class="block25 ml15" mode=""></image>
				<text class="ml10">微信</text>
			</view>
			<view class="mt15 pb15 flex align-center" @click="radio=3">
				<image src="/static/wallet/choice.png" class="block20" v-if="radio==3" mode=""></image>
				<image src="/static/wallet/nochoice.png" class="block20" v-else mode=""></image>
				<image src="/static/wallet/yinhang.png" class="block25 ml15" mode=""></image>
				<text class="ml10">银行卡</text>
			</view>
		</view>
		<view v-if="radio==3" @click="pushPage('/pages/Receivables/bank/cbank')">
			<view class="flex align-center justify-between bg-white px15 mt5 py15" v-if="selbank.id!=''&&selbank.id!=null">
				<view class="flex align-center">
					<image :src="'/static/bank/bank'+selbank.bankindex+'.png'" class="block30" mode=""></image>
					<text class="ml10">{{selbank.bankName}}</text>
					<text>({{selbank.number}})</text>
				</view>
				<text class="cuIcon-right"></text>
			</view>
			<view class="flex align-center justify-between bg-white px15 mt5 py15" v-else>
				<text>绑定银行卡</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="red-button discenter" @click="suretixian">确认提现</view>
		<!-- mask层 -->
		<view :class="['mask', show ? '' : 'visible']"></view>
		<!-- 密码 -->
		<view :class="['contents', show ? '' : 'contenthide']">
			<view class="title">
				<view class="close" @click="close()"><text class="cuIcon-close"></text></view>
				<view class="center">请输入支付密码</view>
				<view class="close"></view>
			</view>
			<view :class="['code', show ? '' : 'visible']">
				<view class="code-box">
					<block v-for="(item, index) in 6" :key="index">
						<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
					</block>
				</view>
				<!-- <input type="number" v-model="password" /> -->
			</view>			
		</view>
		<!-- 键盘 -->
		<view v-if="show" :class="['keyboard', show ? '' : 'active', isIphoneX ? 'isIphone' : '']">
			<block v-for="(item, index) in 9" :key="index">
				<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
			</block>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
			<view class="keyboard-item delte" @tap="del()"><text class="cuIcon-delete"></text></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			//支付密码
			show:false,
			isIphoneX:false,
			password:'',
			payPassword:'',
			money:'',
			radio:1,
			shouxu:0,
			balance:'0',
			bankNumber:'',
			bankName:'',
			bankindex:'',
			bankid:'',
			bankList: {
					'北京银行':{
					bankbg:'#ED372F',
					id:0,
				
				}, 
				'渤海银行':{
					bankbg:'#f5a623',
					id:1,
					
				}, 
				'沧州银行':{
					bankbg:'#0E6AF4',
					id:2,
					
				}, 
				'成都银行':{
					bankbg:'#ED372F',
					id:3,
					
				}, 
				'承德银行':{
					bankbg:'#ED372F',
					id:4,
					
				}, 
				'大连银行':{
					bankbg:'#0E6AF4',
					id:5,
					
				},
				'德州市商业银行':{
					bankbg:'#ED372F',
					id:6,
					
				}, 
				'德州银行':{
					bankbg:'#ED372F',
					id:7,
					
				}, 
				'东营市商业银行':{
					bankbg:'#f5a623',
					id:8,
					
				}, 
				'广东发展银行':{
					bankbg:'#f5a623',
					id:9,
					
				},
				'广发银行':{
					bankbg:'#f5a623',
					id:10,
					
				}, 
				'广州农村信用合作社':{
					bankbg:'#049C4F',
					id:11,
					
				},
				'广州农商银行':{
					bankbg:'#0E6AF4',
					id:12,
					
				}, 
				'广州商业银行':{
					bankbg:'#049C4F',
					id:13,
					
				},
				'广州银行':{
					bankbg:'#9B732D',
					id:14,
					
				}, 
				'海南银行':{
					bankbg:'#0E6AF4',
					id:15,
					
				}, 
				'邯郸银行':{
					bankbg:'#0E6AF4',
					id:16,
					
				},
				'河北银行':{
					bankbg:'#0E6AF4',
					id:17,
					
				}, 
				'衡水银行':{
					bankbg:'#000000',
					id:18,
					
				}, 
				'花旗银行':{
					bankbg:'#000000',
					id:19,
					
				}, 
				'华夏银行':{
					bankbg:'#9B732D',
					id:20,
					
				}, 
				'汇丰银行':{
					bankbg:'#40194d',
					id:21,
					
				}, 
				'交通银行':{
					bankbg:'#0E6AF4',
					id:22,
					
				}, 
				'廊坊银行':{
					bankbg:'#0E6AF4',
					id:23,
					
				}, 
				'辽阳银行':{
					bankbg:'#049C4F',
					id:24,
				
				}, 
				'南京银行':{
					bankbg:'#62606b',
					id:25,
					
				}, 
				'宁波银行':{
					bankbg:'#ED372F',
					id:26,
					
				}, 
				'平安银行':{
					bankbg:'#000000',
					id:27,
					
				}, 
				'齐鲁银行':{
					bankbg:'#0E6AF4',
					id:28,
					
				},
				'青岛银行':{
					bankbg:'#049C4F',
					id:29,
					
				}, 
				'瑞丰银行':{
					bankbg:'#0E6AF4',
					id:30,
					
				}, 
				'瑞士银行':{
					bankbg:'#000000',
					id:31,
					
				}, 
				'厦门商业银行':{
					bankbg:'#f5a623',
					id:32,
					
				}, 
				'上海农村商业银行':{
					bankbg:'#62606b',
					id:33,
					
				}, 
				'上海浦东发展银行':{
					bankbg:'#0E6AF4',
					id:34,
					
				},
				'上海银行':{
					bankbg:'#000000',
					id:35,
					
				}, 
				'深圳发展银行':{
					bankbg:'#9B732D',
					id:36,
					
				}, 
				'盛京银行':{
					bankbg:'#ED372F',
					id:37,
					
				}, 
				'天津银行':{
					bankbg:'#0E6AF4',
					id:38,
				
				}, 
				'兴业银行':{
					bankbg:'#0E6AF4',
					id:39,
					
				},
				'张家口银行':{
					bankbg:'#ED372F',
					id:40,
					
				},
				'长沙银行':{
					bankbg:'#ED372F',
					id:41,
					
				}, 
				'招商银行':{
					bankbg:'#ED372F',
					id:42,
					
				},
				'浙商银行':{
					bankbg:'#f5a623',
					id:43,
					
				},
				'郑州银行':{
					bankbg:'#9B732D',
					id:44,
					
				}, 
				'中国工商银行':{
					bankbg:'#0E6AF4',
					id:45,
					
				}, 
				'中国光大银行':{
					bankbg:'#0E6AF4',
					id:46,
					
				},
				'中国建设银行':{
					bankbg:'#049C4F',
					id:47,
					
				},
				'中国民生银行':{
					bankbg:'#049C4F',
					id:48,
					
				},
				'中国农业发展银行':{
					bankbg:'#049C4F',
					id:49,
				
				}, 
				'中国农业银行':{
					bankbg:'#049C4F',
					id:50,
					
				}, 
				'中国银行':{
					bankbg:'#ED372F',
					id:51,
					
				},
				'中国邮政':{
					bankbg:'#049C4F',
					id:52,
					
				}, 
				'中信实业银行':{
					bankbg:'#ED372F',
					id:53,
					
				}
			},
			wxid:'',
			airid:''
		}
	},
	onLoad() {
		this.getData()
	},
	onShow() {
		if(this.update){
			this.getData()
			this.setUpdate(false)
		}
	},
	computed:{
		...mapState(['selbank','update'])
	},
	onHide() {
		this.show=false
	},
	onBackPress() {
		this.show=false
	},
	methods: {
		...mapActions(['setBank','setUpdate']),
		async getData() {
			let {
				data: {bank,sxfBl,yueNum,wexin,zfb}
			} = await this.$http.post('wallet.yuetixianpage', {}, { tipConfig: { storeBlock: true } })
			this.shouxu=sxfBl
			this.balance=yueNum
			if(bank.length!=0&&bank){
				this.bankid=bank.id
				this.bankName=bank.bankName
				if(this.bankList[this.bankName]){
					bank.bankindex=this.bankList[this.bankName].id
				 }else{
				 	bank.bankindex=this.bankList['北京银行'].id
				 }
				this.bankNumber=bank.number.slice(-4)
				this.setBank(bank)
			}
			if(wexin.id!=undefined&&wexin.id!=null&&wexin.id!=''){
				this.wxid=wexin.id
			}
			if(zfb.id!=undefined&&zfb.id!=null&&zfb.id!=''){
				this.airid=zfb.id
			}
		},
		suretixian(){
			if(this.money==''||this.money==0){
				uni.showToast({
					title:'请输入提现金额',
					icon:"none"
				})
				return false
			}else{
				if(this.radio==1){
					if(this.airid==''){
						uni.showToast({
							title:'请先绑定支付宝',
							icon:'none'
						})
						return false
					}else{
						this.show=true
					}
				}
				if(this.radio==2){
					if(this.wxid==''){
						uni.showToast({
							title:'请先绑定微信',
							icon:'none'
						})
						return false
					}else{
						this.show=true
					}
				}
				if(this.radio==3){
					if(this.bankid==''||this.bankid==null||this.bankid==undefined){
						uni.showToast({
							title:'请先绑定银行卡',
							icon:'none'
						})
						return false
					}else{
						this.show=true
					}
				}
			}
		},
		async pay(){
			let skType=0
			if(this.radio==1||this.radio==2){
				skType=2
				let payid=''
				if(this.radio==1){
					payid=this.airid
				}
				if(this.radio==2){
					payid=this.wxid
				}
				let { data } = 	await this.$http.post('wallet.yuetixian', {txNum:this.money,payPassword:this.payPassword,skType:skType,skZhId:payid}, {
					custom: {tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 }}
				})
			}
			if(this.radio==3){
				skType=1
				let { data } = 	await this.$http.post('wallet.yuetixian', {txNum:this.money,payPassword:this.payPassword,skType:skType,skZhId:this.bankid}, {
					custom: {tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 }}
				})
			}
			
			this.show=false
		},
		key(key) {
			if (this.password.length < 6) {
				this.password += key;
				if (this.password.length == 6) {
					this.payPassword=this.password
					this.pay()
				}
			}
		},
		clear() {
			this.password = '';
		},
		close() {
			this.password = '';
			this.trantision = false;
			this.show=false
		},
		del() {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		}
	}
}
</script>

<style lang="less">
.payline{
	width: 100%;
	height: 1rpx;
	background-color: #F2F2F2;
}
.red-button{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 90rpx;
	border-radius: 10rpx;
	background-color: #D73329;
	color: #FFFFFF;
	margin-top:80rpx ;
}
//密码框

</style>
